<template>
    <div class="menu-box">
        <div class="top-menu">
            <div class="left">
                <div class="logos">
                    <img src="../assets/logo.png" alt="">
                    <span>启帆知识图谱平台</span>
                </div>
                <div class="silder-index">
                    <img src="../assets/flod.png" @click="toggleCollapse" alt="">
                    <span>首页</span>
                </div>
            </div>
            <div class="right">
                <div class="silder-index">
                    <img src="../assets/fullscreen.png" alt="">
                    <span>全屏显示</span>
                </div>
                <div class="lines"></div>
                <div class="user-box">
                    <div class="avatar-box">
                        <img src="../assets/user.png" alt="">
                    </div>
                    <div class="nickname-box">
                        <span>你好，</span>
                        <span>颜彤</span>
                        <el-icon><ArrowDownBold /></el-icon>
                    </div>
                </div>
            </div>
        </div>
        <div class="left-menu" :style="{ maxWidth: isCollapsed ? '64px' : '280px' }">
            <div class="menu-box" :style="{ width: isCollapsed ? '64px' : '240px' }">
                <div class="menu-item" v-for="(item,index) in menuItems" :key="index" @click="menuClick(item, index)" :class="{fold: isCollapsed}">
                    <div class="parent" :class="{ active: activeItem == index && item.child.length > 0,activenochild: activeItem == index && item.child.length === 0 }">
                        <div class="menus">
                            <img v-if="activeItem != index" :src="item.icon" alt="">
                            <img v-if="activeItem == index" :src="item.checkIcon" alt="">
                            <span v-show="!isCollapsed">{{ item.text }}</span>
                        </div>
                        <el-icon v-show="!isCollapsed && !activeChild"><ArrowRightBold /></el-icon>
                        <el-icon v-show="activeChild"><ArrowDownBold /></el-icon>
                    </div>
                    <div class="child" v-show="activeItem == index && activeChild" :class="activeChild ? 'silderdown' : 'silderup'">
                        <div class="child-item" v-for="(child, keys) in item.child" :key="keys" @click.stop="childClick(child, keys)" :class="{ active: activeChildIndex == keys }"> 
                            {{ child.text }} 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, watch, defineProps } from 'vue'
    import { ArrowDownBold, ArrowRightBold } from '@element-plus/icons-vue'
    
    const props = defineProps({ 
        menuItems: { 
            type: Array,
            required: true,
            default: () => [] 
        },
        activeItem: { type: Number, default: 0 },
        isCollapsed: { type: Boolean, default: false },
        activeChild: { type: Boolean, default: false },
        activeChildIndex: { type: Number },
    })
    
    import { useRouter, useRoute } from 'vue-router';
    const route = useRoute()
    const router = useRouter();
    const isCollapsed = ref(false);
    const activeItem = ref(props.activeItem); 
    const activeChild = ref(props.activeChild); 
    const activeChildIndex = ref(props.activeChildIndex); 
    const menuItems = ref(props.menuItems);

    const toggleCollapse = () => {
        isCollapsed.value = !isCollapsed.value;
        activeChild.value = !activeChild.value;
    }

    const menuClick = (item, index) => {
        activeItem.value = index
        activeChild.value = !activeChild.value;
        if(item.route) {
            router.push({ name: item.route.name, query: { activeIndex: index } });
        }
    }
    
    const childClick = (child, childIndex) => {
        activeChildIndex.value = childIndex;
        if(child.route) {
            router.push({ name: child.route.name, query: { activeItem: activeItem.value, isCollapsed: isCollapsed.value, activeChild: activeChild.value, activeChildIndex: childIndex } });
        }
    }
    
    watch(
        () => route.query,
        (newQuery) => { 
            activeItem.value = parseInt(newQuery.activeItem) || 0;
            activeChild.value = newQuery.activeChild || false;
        },
        { immediate: true }
    );
</script>

<style> 
    *{margin: 0; padding: 0;} 
    html,body{min-height: 100vh;width: 100%;background: #F0F4FB;}
    .parent .el-icon{color: #fff!important;margin-right: -5px;}
    .parent.active .el-icon{color: #000!important;}
    .parent.activenochild .el-icon{color: #000!important;}
</style>

<style scoped>
    .menu-box .top-menu{background: #fff;height: 60px;width: 99%;display: flex;flex-direction: row;justify-content: space-between;margin: 0 auto;border-radius: 4px;}
    .menu-box .top-menu .left{display: flex;flex-direction: row;justify-content: space-around;}
    .menu-box .top-menu .left .logos{display: flex;flex-direction: row;justify-content: center;align-items: center;}
    .menu-box .top-menu .left .logos img{width: 25px;height: 25px;margin-left: 40px;cursor: pointer;}
    .menu-box .top-menu .left .logos span{margin-left: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;cursor: pointer;font-size: 20px;font-weight: 500;}
    .menu-box .top-menu .left .silder-index{display: flex;flex-direction: row;justify-content: center;align-items: center;margin-left: 110px;}
    .menu-box .top-menu .left .silder-index img{width: 25px;height: 25px;cursor: pointer;}
    .menu-box .top-menu .left .silder-index span{margin-left: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;}
    .menu-box .top-menu .right{display: flex;flex-direction: row;justify-content: space-around;margin-right: 40px;align-items: center;}
    .menu-box .top-menu .right .silder-index{display: flex;flex-direction: row;justify-content: center;align-items: center;margin-right: 30px;}
    .menu-box .top-menu .right .silder-index img{width: 25px;height: 25px;cursor: pointer;}
    .menu-box .top-menu .right .silder-index span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;cursor: pointer;}
    .menu-box .top-menu .right .lines{height: 30px;width: 2px;background: #343B53;margin-right: 40px;}
    .menu-box .top-menu .right .user-box{display: flex;flex-direction: row;align-items: center;}
    .menu-box .top-menu .right .user-box .avatar-box{width: 40px;height: 40px;background: #D0D3DB;border-radius: 40px;display: flex;flex-direction: row;justify-content: center;align-items: end;}
    .menu-box .top-menu .right .user-box .avatar-box img{width: 30px;height: 30px;border-radius: 30px;}
    .menu-box .top-menu .right span{font-family: 微软雅黑, Microsoft YaHei, SimSun;cursor: pointer;}
    .menu-box .top-menu .right .nickname-box{display: flex;flex-direction: row;gap: 5px;align-items: center;}
    .menu-box .top-menu .right .nickname-box span{display: block;margin-left: 4px;}
    .left-menu{max-width: 280px;height: 100%;}
    .left-menu .menu-box{width: 240px;background: linear-gradient( 135deg, #2E7CF4 0%, #0457D5 100%);margin-left: 40px;margin-top: 35px;border-radius: 10px;height: 100%;min-height: 85vh;display: flex;flex-direction: column;align-items: end;padding-top: 20px;}
    .menu-item{width: calc(90% - 20px);}
    .fold{ transition: all 0.5s ease;width: 100%;}
    .fold img{margin-left: -5px;}
    .menu-item { will-change: transform, opacity; backface-visibility: hidden;display: flex;flex-direction: column; }
    .menu-item .menus{margin-left: 15px;display: flex;flex-direction: row;align-items: center; position: relative; display: flex; align-items: center; white-space: nowrap; }
    .menu-item .menus span{margin-left: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;color: #fff;}
    .menu-item img{width: 25px;height: 25px;margin: 0 auto;display: block;}
    .menu-item.active .menus span{color: #1D173E;}
    .left-menu, .menu-box { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
    .menu-item .menus span{ transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s ease; display: inline-block; min-width: 0;  }
    .parent{padding: 15px 0 15px 0;display: flex;flex-direction: row;justify-content: space-between;cursor: pointer;align-items: center; margin-top: 20px;border-top-left-radius: 8px;padding-right: 20px;}
    .fold .parent{border-radius: 8px;width: 40px;justify-content: center;padding: 10px 0 10px 0;}
    .fold .menus{margin-left: 0;}
    .fold.menu-item{justify-content: center;align-items: center;}
    .parent.active{background: #fff;}
    .parent.activenochild{background: #fff;border-bottom-left-radius: 8px;}
    .parent.active .menus span{color: #000;}
    .parent.activenochild .menus span{color: #000;}
    .child{border-bottom-left-radius: 8px;background: #4D8DF0;}
    .child-item{width: 100%;padding: 15px 0 15px 0;color: #A2C3F6;cursor: pointer;}
    .child-item.active{color:#fff}
    .silderdown{animation: scale-down-ver-top 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
    .silderup{animation: scale-up-ver-top 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
    @keyframes scale-down-ver-top { 
        0% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; } 
        100% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; } 
    }
    @keyframes scale-up-ver-top {
        0% { 
            -webkit-transform: scaleY(1); 
            transform: scaleY(1); 
            -webkit-transform-origin: 100% 0%; 
            transform-origin: 100% 0%; 
        }
        100% { 
            -webkit-transform: scaleY(0); 
            transform: scaleY(0); 
            -webkit-transform-origin: 100% 0%; 
            transform-origin: 100% 0%; 
        }
    }
</style>